import React, {useEffect, useState} from 'react';
import {Button, Select} from 'antd';
import style from './Top.module.less';
import {setRemoteDescription} from "../../leftBox/LeftBox";
import {CustomerServiceOutlined, FolderOpenOutlined, MessageOutlined, VideoCameraOutlined} from "@ant-design/icons";



const {Option} = Select;


export default function TopBox({onCallback}) {
    const [screenList, setScreenList] = useState([]);
    const pc = new window.RTCPeerConnection({})

    useEffect(() => {
        openScreenInfoMonitor()
        return () => {
            window.electronAPI.clearScreenInfo()
            window.electronAPI.clearAnswer()
            window.electronAPI.clearOffer()
        }
    }, []);

    const sendSelectedScreen = (screenId) => {
        console.log(screenId)
        onCallback(screenId)
    }

    // TODO [Slave] 开启屏幕信息监控
    const openScreenInfoMonitor = () => {
        window.electronAPI.getScreenInfo((event, screens) => {
            setScreenList(screens);
        });
    }




    return (
        <div className={style.topContainer}>
            <div className={style.icoBox}>
                <MessageOutlined className={style.ico} ></MessageOutlined>
                <VideoCameraOutlined className={style.ico} ></VideoCameraOutlined>
                <CustomerServiceOutlined  className={style.ico}></CustomerServiceOutlined>
                <FolderOpenOutlined className={style.ico}/>
            </div>
            <Select
                style={{width: 100}}
                placeholder="屏幕"
                onChange={sendSelectedScreen}
            >

                {screenList.map((screen, index) => (
                    <Option key={index} value={screen.id}>
                        {screen.name}
                    </Option>
                ))}
            </Select>
        </div>
    );
}